<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车render版本</title>
    <style>
        .active {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <h4 style="text-align: center;">在底层的实现上,vue将模板编译成虚拟DOM渲染函数。结合响应系统,
        Vue能够智能的计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少
    </h4>
    <div id="app">
        <!-- 这里主页内，却没有写任何内容 -->
    </div>
    <script src="vue.js"></script>
    <script>
        // 创建vue实例
        const app = new Vue({    // 创建app  保存vue实例
            el: '#app',
            data() {
                return {
                    title: '这是购物车的页面',
                    course: '',
                    selectedCourse: '',
                    // 数据模型
                    courses: []
                }
            },
            methods: {
                addCourse() {
                    // 1.添加course到数组
                    this.courses.push(this.course)
                    // 2.清空course
                    this.course = ''
                }
            },
            render() {
                // this调用当前组件(下面)的实例，vue实现了模板技术
                // 而主页(19-21)内却没有写入任何内容
                with (this) {
                    return _c('div', {
                        attrs: { "id": "app" }
                    }, [_c('h2', {
                        attrs: { "title": title }
                    },
                        [_v("\n " + _s(title) + "\n ")]),
                    _v(" "), _c('input', {
                        directives: [{
                            name: "model",
                            rawName: "v-model",
                            value: (course),
                            expression: "course"
                        }],
                        attrs: { "type": "text" },
                        domProps: { "value": (course) },
                        on: {
                            "keydown": function ($event) {
                                if (!$event.type.indexOf('key') && _k(
                                    $event.keyCode,
                                    "enter", 13, $event.key, "Enter"
                                )) return null;
                                return addCourse($event)
                            },
                            "input": function ($event) {
                                if ($event.target.composing) return;
                                course = $event.target.value
                            }
                        }
                    }), _v(" "), _c('button', {
                        on: { "click": addCourse }
                    }, [_v("新增课程")]), _v(" "),
                    (courses.length == 0) ? _c('p',
                        [_v("没有任何课程信息")]) : _e(), _v(" "), _c('ul', _l((courses),
                            function (c) {
                                return _c('li', {
                                    class: {
                                        active: (selectedCourse === c)
                                    }, on: {
                                        "click": function ($event) { selectedCourse = c }
                                    }
                                }, [_v(_s(c))]
                                )
                            }), 0)
                    ])
                }
            }
        })
        // 对app做日志输出,在其将来进行操作时,可以拿到app的渲染函数
        console.log(app.$options.render)
    </script>
</body>

</html>